<template>
	<view class="login">
		<view class="logo">
			<image src="https://upyun.dinghuale.com/uploads/images/logo.png" mode="widthFix" style="width: 36%;">
			</image>
		</view>
		<form class="loginForm">
			<view class="form-item" v-if="!way">
				<view class="title">用户名</view>
				<input type="text" placeholder="请输入手机号" class="ipt" v-model="registerForm.name">
			</view>
			<view class="form-item">
				<view class="title">手机号</view>
				<input type="text" placeholder="请输入手机号" class="ipt" v-model="loginForm.phone">
			</view>
			<view class="form-item">
				<view class="title">密码</view>
				<input type="password" placeholder="请输入密码" class="ipt" v-model="loginForm.password">
			</view>
			<!-- <view class="form-item" v-else>
				<view class="title">验证码</view>
				<view class="yanzhengma">
					<input type="text" placeholder="请输入验证码" class="ipt">
					<text style="margin-right: 35px;font-size: 15px;">获取验证码</text>
				</view>
			</view> -->
			<view class="form-item" v-if="!way">
				<view class="title">确认密码</view>
				<input type="password" placeholder="请再次输入密码" class="ipt" v-model="secondPass">
			</view>
			<view class="submit" @click="submit" v-if="way">登录</view>
			<view class="submit" @click="register" v-else>注册</view>
		</form>
		<!-- 切换登录方式 -->
		<view class="way" v-if="way" @click="changeWay">注册</view>
		<view class="way" v-else @click="changeWay">密码登录</view>
		<u-divider text=" 第三方登录 " v-if="way"></u-divider>
		<view class="login_bottom" v-if="way">
			<u-icon name="qq-fill" label="QQ" size="30px"></u-icon>
			<u-icon name="weixin-fill" label="微信" size="30px"></u-icon>
		</view>
		<u-overlay :show="show">
			<view class="toast">{{toastText}}</view>
		</u-overlay>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					password: ''
				},
				registerForm: {
					name: ""
				},
				secondPass: '',
				way: true,
				show: false,
				toastText: '',
				back: ''
			}
		},
		onLoad(options) {
			if (options.page) {
				this.back = {
					...options
				}
			}
		},
		methods: {
			...mapMutations('userInfo', ['setStorage']),
			...mapMutations('cart', ['setshoppingCart']),
			...mapMutations('city', ['setCity']),
			changeWay() {
				this.way = !this.way
				this.loginForm = {}
				this.registerForm = {}
			},
			toast(text) {
				this.show = true
				this.toastText = text
				setTimeout(() => {
					this.toastText = ''
					this.show = false
				}, 2000)
			},
			getShoppingCart() {
				uni.$http.get('/api/shoppingCart', {
					project_id: 319
				}).then(res => {
					this.setshoppingCart(res.data.result)
				})
			},
			getCity() {
				uni.$http.get('/api/city').then(res => {
					this.setCity(res.data.result)
				})
			},
			async submit() {
				if (this.loginForm.phone === '' || this.loginForm.password === '') {
					return this.toast("请输入手机号和密码")
				}
				let data = {
					// ...this.loginForm
					phone: '13620445274',
					password: "123456"
				}
				let res = await uni.$http.post('/api/login', data)
				if (res.statusCode !== 200) {
					this.toast(res.data.msg)
				} else {
					this.setStorage(res.data.result)
					this.getShoppingCart()
					this.getCity()
					this.$refs.uToast.show({
						type: 'success',
						message: "登录成功",
						duration: 500,
						position: "top",
						complete: () => {
							uni.reLaunch({
								url: this.back ? `/${this.back.page}?id=${this.back.id}` :
									"/pages/personalCenter/personalCenter"
							})
						}
					})
				}
			},
			register() {
				if (this.loginForm.name === '') {
					return this.toast("请输入用户名")
				}
				if (this.loginForm.phone === '') {
					return this.toast("请输入手机号")
				}
				if (this.loginForm.password === '' || this.secondPass === '') {
					return this.toast("请输入密码")
				}
				if (this.loginForm.password !== this.secondPass) {
					return this.toast("两次密码输入不一致")
				}
				let data = {
					...this.loginForm,
					...this.registerForm
				}
				uni.$http.post('/api/register', data).then(res => {
					if (res.data.msg === '手机号码已注册') {
						this.toast(res.data.msg)
					} else if (res.data.msg === 'Validation error' || res.data.msg === '参数phone格式不对或者缺失') {
						this.toast('手机号错误')
					} else {
						this.$refs.uToast.show({
							type: 'success',
							message: "注册成功",
							duration: 500,
							position: "top"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 0 30rpx;

		.logo {
			display: flex;
			justify-content: center;
			padding: 40px 0;
		}

		.loginForm {
			.form-item {
				margin-bottom: 15px;
				border-bottom: 2px solid #e9ecf0;

				.yanzhengma {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.ipt {
					padding: 15px 0;
				}
			}

			.submit {
				background-color: #884E22;
				color: #fff;
				font-size: 18px;
				line-height: 45px;
				text-align: center;
				margin: 10px 0 20px;
			}
		}

		.way {
			width: 100%;
			font-size: 18px;
			text-align: center;
			margin-bottom: 20px;
		}

		.login_bottom {
			display: flex;
			justify-content: space-around;
			margin-top: 20px;
		}

		.toast {
			width: 100%;
			line-height: 60px;
			text-align: center;
			color: #fff;
			background-color: #000;
			opacity: 0.6;
			position: absolute;
			left: 0;
			top: 30%;
			font-size: 16px;
		}
	}
</style>
